<template>
  <div
    :class="[
      upload_file_body,
      transition_size_change,
      css_content_padding,
      css_cursor_pointer,
      css_operate_title,
      css_wind_light_hover,
    ]"
    :id="upload_file_body"
    :keyVal_node="upload_file_inp"
  >
    <keyVal_node
      :class="[css_disnone]"
      :for_form="upload_file_form"
      :for_key="upload_file_form_file"
      :id="upload_file_inp"
    ></keyVal_node>
    <div
      :class="[
        upload_file_placeholder,
        upload_file_placeholder_up,
        upload_file_body_special,
      ]"
      :id="upload_file_placeholder_up"
    >
      <span :class="[upload_file_title]" :id="upload_file_title_up">{{
        user_upload_placeholder
      }}</span>
      <span
        :class="[css_operate_title, upload_file_operate]"
        :id="upload_file_title_up_operate"
        >{{ title_upload_file_operate }}</span
      >
    </div>
    <div
      :class="[
        upload_file_placeholder,
        upload_file_placeholder_load,
        css_child_margin_top,
        css_disnone,
      ]"
      :id="upload_file_placeholder_load"
    >
      <load_file_info></load_file_info>
      <div :class="[css_operate_title, upload_file_operate_flex]">
        <div
          :class="[
            css_wind_light_hover,
            css_content_padding,
            css_cursor_pointer,
            upload_file_load_change,
          ]"
          :id="upload_file_load_change"
        >
          {{ btn_upload_file_load_change }}
        </div>
        <div
          :class="[
            css_wind_light_hover,
            css_content_padding,
            css_cursor_pointer,
            upload_file_load_cancel,
          ]"
          :id="upload_file_load_cancel"
        >
          {{ btn_upload_file_load_cancle }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import './upload_file.css';

import keyVal_node from '../../../global_comps/uni_comps/keyVal_node/keyVal_node.vue';

import load_file_info from './uni_comps/load_file_info/load_file_info.vue';

import {
  css_child_margin_top,
  css_content_padding,
  css_cursor_pointer,
  css_disnone,
  css_operate_title,
  css_wind_light_hover,
  transition_size_change,
} from '../../../global_comps/Css';
import {
  btn_upload_file_load_cancle,
  btn_upload_file_load_change,
  title_upload_file_operate,
  upload_file_body,
  upload_file_body_special,
  upload_file_form_file,
  upload_file_inp,
  upload_file_load_cancel,
  upload_file_load_change,
  upload_file_operate,
  upload_file_operate_flex,
  upload_file_placeholder,
  upload_file_placeholder_load,
  upload_file_placeholder_up,
  upload_file_title,
  upload_file_title_up,
  upload_file_title_up_operate,
} from './DataDefine/sourceData';
import { init_upload_file } from './upload_file';
import { user_upload_placeholder } from '../../../user/uni_comps/user_upload/DataDefine/sourceData';
import { upload_file_form } from '../../DataDefine/sourceData';

onMounted(() => {
  init_upload_file();
});
</script>
